<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <!-- 搜索表单 -->
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="房型" prop="typeName">
            <el-input
              id="typeName"
              v-model="queryParams.typeName"
              placeholder="请输入房间类型"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 数据操作按钮 -->
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              v-hasAuthority="['pos:roomType:add']"
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
            >删除</el-button>
          </el-col> -->
        </el-row>

        <!-- 数据展示Table -->
        <el-table v-loading="loading" :data="dataList">
          <el-table-column
            prop="typeId"
            label="ID"
            align="center"
            width="240"
          />
          <el-table-column prop="typeName" label="名称" align="center" />
          <el-table-column prop="typePrice" label="价格" align="center" />
          <el-table-column prop="typeStatus" label="状态" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-hasAuthority="['pos:roomType:edit']"
                size="small"
                type="text"
                icon="el-icon-edit"
                :disabled="scope.row.typeStatus =='已停用'"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                v-hasAuthority="['pos:roomType:disable']"
                size="small"
                :type="scope.row.typeStatus =='可用'? 'danger':'primary'"
                icon="el-icon-status"
                @click="handleStatus(scope.row)"
              >
                <template v-if="scope.row.typeStatus == '已停用'" #default>启用</template>
                <template v-else #default>禁用</template>
              </el-button>
            </template>
            <!-- <el-button
                v-hasAuthority="['pos:roomType:disable']"
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template> -->
          </el-table-column>
        </el-table>

        <!-- 分页加载 -->
        <el-pagination
          :page-sizes="[5, 10, 20, 50]"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>

    <!-- 新增/修改对话框 默认不显示 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="编号" prop="typeId">
          <el-input
            id="typeId"
            v-model="form.typeId"
            placeholder="请输入类型编号"
          />
        </el-form-item>
        <el-form-item label="名称" prop="typeName">
          <el-input
            id="typeName"
            v-model="form.typeName"
            placeholder="请输入类型名称"
          />
        </el-form-item>
        <el-form-item label="价格" prop="typePrice">
          <el-input
            id="typePrice"
            v-model="form.typePrice"
            placeholder="请输入价格"
          />
        </el-form-item>
        <!-- <el-form-item label="状态" prop="typeStatus">
          <el-select
            id="typeStatus"
            v-model="form.typeStatus"
            clearable
            placeholder="请选择"
          >
            <el-option label="启用" value="可用" />
            <el-option label="禁用" value="已停用" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
</style>
<script>
import {
  listAllRoomType,
  listroomTypeByPage,
  delroomType,
  getroomType,
  addroomType,
  updateroomType,
  changeTypeStatus
} from '@/api/pos/roomType'
export default {
  name: 'RoomType',
  // 定义属性
  data() {
    return {
      loading: false,
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        typeId: null,
        typeName: null,
        orderNum: null,
        typeStatus: null
      },
      // 后端数据总数
      total: 0,
      // 勾选的productId
      // ids:[],
      // 是否勾选一个
      // single: true,
      // 对话框标题
      title: '',
      // 对话框是否显示
      open: false,
      // 表单数据
      form: {},
      // 表单校验规则
      rules: {
        typeId: [
          { required: true, message: '类型编号不能为空', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '类型名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性，可选
  computed: {},
  // 监控data变化，可选
  watch: {},

  // 生命周期-创建完成，可选
  created() {},
  // 生命周期-挂载完成，可选
  mounted() {
    this.getList()
  },

  // 方法集合
  methods: {
    getList() {
      this.loading = true
      listroomTypeByPage(this.queryParams).then((response) => {
        this.dataList = response.data.list
        // this.total = response.data.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.getList()
    },

    // 删除数据
    handleDelete(row) {
      const typeId = row.typeId || this.ids
      this.$confirm('是否确认删除ID为"' + typeId + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return delroomType(typeId)
        })
        .then(() => {
          this.getList() // 刷新数据
          this.$message.success('删除成功')
        })
        .catch(() => {})
    },

    handleStatus(row) {
      // 反转房间状态
      // const infoId = row.infoId // 确保获取了infoId
      row.typeStatus === '已停用' ? '可用' : '已停用'
      // 调用API来修改房间状态
      changeTypeStatus(row).then(response => {
        // 更新成功后更新界面和显示消息
        this.$message.success(response.msg) // 在Vue组件中显示成功消息
        // 重新获取房间列表
        this.getList()
      }).catch(error => {
        // 更新失败时的处理逻辑
        this.$message.error('更新房间状态失败：' + error.message) // 在Vue组件中显示错误消息
      })
    },
    // 添加数据
    handleAdd() {
      this.resetForm()
      this.open = true
      this.title = '添加数据'
    },
    // 修改数据
    handleUpdate(row) {
      this.resetForm()
      this.open = true
      const typeId = row.typeId
      // eslint-disable-next-line no-undef
      getroomType(typeId).then((response) => {
        this.form = response.data
      })
      this.title = '修改数据'
    },
    // 提交表单
    submitForm() {
      // eslint-disable-next-line eqeqeq
      this.$refs['form'].validate((valid) => {
        if (valid){
          if (this.title === '添加数据') {
            console.log('add')
            // console.log(addRoomInfo(this.form));
            // eslint-disable-next-line no-undef
            addroomType(this.form).then((response) => {
              this.$message.success(response.msg)
              this.getList()
              this.cancel()
            })
          } else {
            console.log('update')
            console.log(this.form)
            // console.log(updateRoomInfo(this.form));
            updateroomType(this.form).then((response) => {
              this.$message.success(response.msg)
              this.getList()
              this.cancel()
            })
          }
        }
      })
    },
    // 取消提交
    cancel() {
      this.open = false
      this.title = ''
    },
    // form初始化
    resetForm() {
      this.form = {
        typeId: null,
        typeName: null,
        orderNum: null
      }
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  }
}
</script>

